<!doctype html>
<html>
<head>
	<script type="text/javascript" src="http://cdn.webix.io/edge/webix.js"></script>
	<link rel="stylesheet" type="text/css" href="http://cdn.webix.io/edge/webix.css">

	<script type="text/javascript" src="./ace.js"></script>
</head>
<body>
	<script type="text/javascript">
		//path from which autoload extra libraries
		webix.codebase = "./";
		
		webix.ui({
			cols:[{
				header:"JavaScript", body:{
					view: "ace-editor",
					theme: "monokai",
					mode: "javascript",
					value: 'function foo(items) {\n\tvar i;\n\tfor (i = 0; i < items.length; i++) {\n\t\talert("Ace Rocks " + items[i]);\n\t}\n}'
				}
			}, {
	    		header:"Css", body:{
					view: "ace-editor",
					theme: "github",
					mode: "css",
					value: '.webix_icon{\n\tfont-size: 24px; \n}'
				}
	    	}]
		});
    </script>
</body>
</html>